<!DOCTYPE html>

<html>
<head>
    <title>Tests for background gradients</title>

    <style type="text/css">

        .section {
            display: block;
            border: 1px solid #CCC;
            margin: 2em 1em;
            overflow: hidden;
            background:url(border.png);
            position: relative;
            z-index: 0;
            zoom: 1;
        }

        h1 {
            font-size: 1em;
            margin: 1em;
        }

        p {
            float: left;
            padding: 1em;
            width: 15%;
            height: 8em;
            border: 1px solid;
            margin: 1em;
            color: #000;
            text-shadow: #FFF 0 0 2px;
            -moz-border-radius: 1em;
            -webkit-border-radius: 1em;
            border-radius: 1em;
            behavior: url(../build/PIE.htc);
        }

        #vert1 {
            background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(top, yellow, blue);
            background: linear-gradient(to bottom, yellow, blue);
            -pie-background: linear-gradient(to bottom, yellow, blue);
        }
        #vert2 {
            background: -webkit-gradient(linear, left bottom, left top, from(blue), to(yellow));
            background: -moz-linear-gradient(bottom, blue, yellow);
            background: linear-gradient(to top, blue, yellow);
            -pie-background: linear-gradient(to top, blue, yellow);
        }
        #vert3 {
            background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(-90deg, yellow, blue);
            background: linear-gradient(180deg, yellow, blue);
            -pie-background: linear-gradient(180deg, yellow, blue);
        }
        #vert4 {
            background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(270deg, yellow, blue);
            background: linear-gradient(-180deg, yellow, blue);
            -pie-background: linear-gradient(-180deg, yellow, blue);
        }
        #vert5 {
            background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(top, yellow 0%, blue 100%);
            background: linear-gradient(to bottom, yellow 0%, blue 100%);
            -pie-background: linear-gradient(to bottom, yellow 0%, blue 100%);
        }
        #vert6 {
            background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(yellow, blue);
            background: linear-gradient(yellow, blue);
            -pie-background: linear-gradient(yellow, blue);
        }

        #horiz1 {
            background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
            background: -moz-linear-gradient(left, yellow, blue);
            background: linear-gradient(to right, yellow, blue);
            -pie-background: linear-gradient(to right, yellow, blue);
        }
        #horiz2 {
            background: -webkit-gradient(linear, right top, left top, from(blue), to(yellow));
            background: -moz-linear-gradient(right, blue, yellow);
            background: linear-gradient(to left, blue, yellow);
            -pie-background: linear-gradient(to left, blue, yellow);
        }
        #horiz3 {
            background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
            background: -moz-linear-gradient(0, yellow, blue);
            background: linear-gradient(90deg, yellow, blue);
            -pie-background: linear-gradient(90deg, yellow, blue);
        }
        #horiz4 {
            background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
            background: -moz-linear-gradient(360deg, yellow, blue);
            background: linear-gradient(450deg, yellow, blue);
            -pie-background: linear-gradient(450deg, yellow, blue);
        }
        #horiz5 {
            background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
            background: -moz-linear-gradient(left, yellow 0%, blue 100%);
            background: linear-gradient(to right, yellow 0%, blue 100%);
            -pie-background: linear-gradient(to right, yellow 0%, blue 100%);
        }

        #diag1 {
            background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(top left, yellow, blue);
            background: linear-gradient(to bottom right, yellow, blue);
            -pie-background: linear-gradient(to bottom right, yellow, blue);
        }
        #diag2 {
            background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(top left, yellow, blue);
            background: linear-gradient(to right bottom, yellow, blue);
            -pie-background: linear-gradient(to right bottom, yellow, blue);
        }
        #diag3 {
            background: -webkit-gradient(linear, right bottom, left top, from(blue), to(yellow));
            background: -moz-linear-gradient(bottom right, blue, yellow);
            background: linear-gradient(to top left, blue, yellow);
            -pie-background: linear-gradient(to top left, blue, yellow);
        }
        #diag4 {
            background: -webkit-gradient(linear, right bottom, left top, from(blue), to(yellow));
            background: -moz-linear-gradient(bottom right, blue, yellow);
            background: linear-gradient(to left top, blue, yellow);
            -pie-background: linear-gradient(to left top, blue, yellow);
        }
        #diag5 {
            background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(-45deg, yellow, blue);
            background: linear-gradient(135deg, yellow, blue);
            -pie-background: linear-gradient(135deg, yellow, blue);
        }
        #diag6 {
            background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
            background: -moz-linear-gradient(315deg, yellow, blue);
            background: linear-gradient(495deg, yellow, blue);
            -pie-background: linear-gradient(495deg, yellow, blue);
        }

        #toCorner1 {
            background: linear-gradient(to top right, red, white, blue);
            -pie-background: linear-gradient(to top right, red, white, blue);
            width: 8em;
        }
        #toCorner2 {
            background: linear-gradient(to top right, red, white, blue);
            -pie-background: linear-gradient(to top right, red, white, blue);
            width: 400px;
        }
        #toCorner3 {
            background: linear-gradient(to top right, red, white, blue);
            -pie-background: linear-gradient(to top right, red, white, blue);
            width: 60px;
        }
        #toCorner4 {
            background: linear-gradient(to bottom right, red, white, blue);
            -pie-background: linear-gradient(to bottom right, red, white, blue);
        }
        #toCorner5 {
            background: linear-gradient(to bottom left, red, white, blue);
            -pie-background: linear-gradient(to bottom left, red, white, blue);
        }
        #toCorner6 {
            background: linear-gradient(to top left, red, white, blue);
            -pie-background: linear-gradient(to top left, red, white, blue);
        }

        #multi1 {
            background: -webkit-gradient(linear, left top, left bottom, from(yellow), color-stop(0.2, blue), to(#0f0));
            background: -moz-linear-gradient(top, yellow, blue 20%, #0f0);
            background: linear-gradient(to bottom, yellow, blue 20%, #0f0);
            -pie-background: linear-gradient(to bottom, yellow, blue 20%, #0f0);
        }
        #multi2 {
            background: -webkit-gradient(linear, left top, right top, from(yellow), color-stop(0.2, blue), to(#0f0));
            background: -moz-linear-gradient(left, yellow, blue 20%, #0f0);
            background: linear-gradient(to right, yellow, blue 20%, #0f0);
            -pie-background: linear-gradient(to right, yellow, blue 20%, #0f0);
        }
        #multi3 {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, yellow), color-stop(0.5, blue), color-stop(0.7, green));
            background: -moz-linear-gradient(top, yellow 30%, blue 50%, green 70%);
            background: linear-gradient(to bottom, yellow 30%, blue 50%, green 70%);
            -pie-background: linear-gradient(to bottom, yellow 30%, blue 50%, green 70%);
        }
        #multi4 {
            background: -webkit-gradient(linear, left top, right top, color-stop(0.5, yellow), color-stop(0.75, blue), to(green));
            background: -moz-linear-gradient(left, yellow 50%, blue, green);
            background: linear-gradient(to right, yellow 50%, blue, green);
            -pie-background: linear-gradient(to right, yellow 50%, blue, green);
        }
        #multi5 {
            background: -webkit-gradient(linear, left top, right top, from(aqua), color-stop(.0667, black), color-stop(.1333, blue), color-stop(.2, fuchsia), color-stop(.2667, gray), color-stop(.3333, green), color-stop(.4, lime), color-stop(.4667, maroon), color-stop(.5333, navy), color-stop(.6, olive), color-stop(.6667, purple), color-stop(.7333, red), color-stop(.8, silver), color-stop(.8667, teal), color-stop(.9333, white), to(yellow));
            background: -moz-linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
            background: linear-gradient(to right, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
            -pie-background: linear-gradient(to right, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
        }
        #multi6 {
            background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(0.333, yellow), color-stop(.667, green), to(blue));
            background: -moz-linear-gradient(45deg, red, yellow, green, blue);
            background: linear-gradient(45deg, red, yellow, green, blue);
            -pie-background: linear-gradient(45deg, red, yellow, green, blue);
        }

        #lineup p {
            border: 0;
            width: 40%;
            height: 50px;
            margin-right: 0;
            border-radius: 0;
            background: -moz-linear-gradient(center bottom,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
            background: linear-gradient(to top,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
            -pie-background: linear-gradient(to top,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
        }
        #lineup2 {
            margin-left: 0;
        }


        #opacity {
            background: url(background2.gif);
        }
        #opacity1 {
            background: -webkit-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
            background: -moz-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
            background: -o-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
            background: linear-gradient(to bottom, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
            -pie-background: linear-gradient(to bottom, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
        }
        #opacity1:hover {
            background: -webkit-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
            background: -moz-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
            background: -o-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
            background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
            -pie-background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
        }
        #opacity2 {
            background: -webkit-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            background: -moz-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            background: -o-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            -pie-background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
        }
        #opacity2:hover {
            background: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            background: -moz-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            background: -o-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            background: linear-gradient(to right, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
            -pie-background: linear-gradient(to right, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
        }

        #transform > p {
            background: linear-gradient(red, white, blue);
            -pie-background: linear-gradient(red, white, blue);
        }
        #transform2 {
            -ms-transform: rotate(30deg);
            transform: rotate(30deg);
        }
        #transform3 {
            -ms-transform: rotate(60deg);
            transform: rotate(60deg);
        }
        #transform4 {
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }


    </style>
</head>
<body>

    <div class="section" id="vertTests">
        <h1>Basic vertical linear gradient</h1>
        <p id="vert1">linear-gradient( to bottom, yellow, blue);</p>
        <p id="vert2">linear-gradient( to top, blue, yellow);</p>
        <p id="vert3">linear-gradient( 180deg, yellow, blue);</p>
        <p id="vert4">linear-gradient( -180deg, yellow, blue);</p>
        <p id="vert5">linear-gradient( to bottom, yellow 0%, blue 100%);</p>
        <p id="vert6">linear-gradient( yellow, blue);</p>
    </div>

    <div class="section" id="horizTests">
        <h1>Basic horizontal linear gradient</h1>
        <p id="horiz1">linear-gradient( to right, yellow, blue);</p>
        <p id="horiz2">linear-gradient( to left, blue, yellow);</p>
        <p id="horiz3">linear-gradient( 90deg, yellow, blue);</p>
        <p id="horiz4">linear-gradient( 450deg, yellow, blue);</p>
        <p id="horiz5">linear-gradient( to right, yellow 0%, blue 100%);</p>
    </div>

    <div class="section" id="diagTests">
        <h1>Basic diagonal linear gradient</h1>
        <p id="diag1">linear-gradient( to bottom right, yellow, blue);</p>
        <p id="diag2">linear-gradient( to right bottom, yellow, blue);</p>
        <p id="diag3">linear-gradient( to top left, blue, yellow);</p>
        <p id="diag4">linear-gradient( to left top, blue, yellow);</p>
        <p id="diag5">linear-gradient( 135deg, yellow, blue);</p>
        <p id="diag6">linear-gradient( 495deg, yellow, blue);</p>
    </div>

    <div class="section" id="toCornerTests">
        <h1>To-corner linear gradient angles</h1>
        <p id="toCorner1"></p>
        <p id="toCorner2"></p>
        <p id="toCorner3"></p>
        <p id="toCorner4"></p>
        <p id="toCorner5"></p>
        <p id="toCorner6"></p>
    </div>

    <div class="section" id="multiStopTests">
        <h1>Multiple color stops along linear gradient</h1>
        <p id="multi1">linear-gradient( to bottom, yellow, blue 20%, #0f0)</p>
        <p id="multi2">linear-gradient( to right, yellow, blue 20%, #0f0)</p>
        <p id="multi3">linear-gradient( to bottom, yellow 30%, blue 50%, green 70%)</p>
        <p id="multi4">linear-gradient( to right, yellow 50%, blue, green)</p>
        <p id="multi5">linear-gradient( to right, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );</p>
        <p id="multi6">linear-gradient( 45deg, red, yellow, green, blue);</p>
    </div>

    <div class="section" id="lineup">
        <h1>Lining up (<a href="http://github.com/lojjic/PIE/issues/issue/64">issue 64</a>)</h1>
        <p id="lineup1">element 1</p>
        <p id="lineup2">element 2</p>
    </div>

    <div class="section" id="opacity">
        <h1>Color-stop opacity</h1>
        <p id="opacity1">linear-gradient(to bottom, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2))</p>
        <p id="opacity2">linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1))</p>
    </div>

    <div class="section" id="transform">
        <h1>With transforms (IE9 only)</h1>
        <p id="transform1">linear-gradient(red, white, blue)</p>
        <p id="transform2">linear-gradient(red, white, blue)</p>
        <p id="transform3">linear-gradient(red, white, blue)</p>
        <p id="transform4">linear-gradient(red, white, blue)</p>
    </div>

</body>
</html>